.container {
    display: flex;
    flex-direction: column;
    padding: 10px;
    animation: scale-in-ver-top 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    .text-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 20px;
    }
    .conmment-main {
        margin: 20px 0;
        .comment-textarea {
            width: 100%;
            // border: 2px solid #409eff;
            border: 2px solid $disable-grey-color;
            border-radius: 6px;
            padding: 15px;
            min-height: 180px;
            resize: none;
            outline: none;
            background-image: url('../../../../src/assets/images/home/cooment-bg.png'), url('../../../../src/assets/images/home/cooment-bg2.png'), url('../../../../src/assets/images/home/cooment-bg3.png');
            background-position: 0 100%, 100% 100%, 100% 0;
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-size: 4%, 4%, 4%;
            font-size: 16px;
            transition: all .2s;
        }
        .comment-textarea:focus {
            // border-color: $common-pink2-color;
            border-color: $button-blue-color;
           
        }
        .operation {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            button {
                position: relative;
                border: none;
                background: transparent;
                padding: 0;
                cursor: pointer;
                outline-offset: 4px;
                transition: filter 250ms;
                user-select: none;
                touch-action: manipulation;
            }
            .shadow {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 12px;
                background: hsl(0deg 0% 0% / 0.25);
                will-change: transform;
                transform: translateY(2px);
                transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
            }
            .edge {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 12px;
                background: linear-gradient(
                    to left,
                    hsl(340deg 100% 16%) 0%,
                    hsl(340deg 100% 32%) 8%,
                    hsl(340deg 100% 32%) 92%,
                    hsl(340deg 100% 16%) 100%
                    );
            }
            .front {
                display: block;
                position: relative;
                padding: 10px 20px;
                border-radius: 12px;
                font-size: 1.1rem;
                color: white;
                background: hsl(345deg 100% 47%);
                will-change: transform;
                transform: translateY(-4px);
                transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
            }
            button:hover {
                filter: brightness(110%);
            }
            button:hover .front {
                transform: translateY(-6px);
                transition: transform
                    250ms
                    cubic-bezier(.3, .7, .4, 1.5);
            }
            button:active .front {
                transform: translateY(-2px);
                transition: transform 34ms;
            }
            button:hover .shadow {
                transform: translateY(4px);
                transition: transform
                    250ms
                    cubic-bezier(.3, .7, .4, 1.5);
            }
            button:active .shadow {
                transform: translateY(1px);
                transition: transform 34ms;
            }
            button:focus:not(:focus-visible) {
                outline: none;
            }
        }
    }
}
.container-out {
    animation: scale-out-ver-top 0.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}